/**
 * @description 登录
 * @author MaoXiangDong
 * @version 2021/4/20
 * @Email: 862755519@qq.com
 * @WeChat: 19908853414
 */
<template>
<div class="login-page">
    <div class="login-center">
        <div class="login-title">欢迎登录</div>
        <div class="login-form">
            <el-form ref="refForm" :model="ruleForm" :rules="rules">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" type="text" placeholder="请输入登录账号" size="default" prefix-icon="user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" type="password" placeholder="请输入登录密码" size="default" prefix-icon="lock" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="form-row">
                        <el-checkbox v-model="checked" label="Option 1" size="large">记住密码</el-checkbox>
                        <span>没有账号？</span>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="default" style="width:100%;" @click="submitForm()">登录</el-button>
                </el-form-item>
                <el-form-item>
                    <el-divider content-position="center">其他登录方式</el-divider>
                    <div class="login-type">
                        <div class="type-item">
                            <svg-icon name="other-wechat" />
                            <p>微信</p>
                        </div>
                        <div class="type-item">
                            <svg-icon name="other-qq" />
                            <p>QQ</p>
                        </div>
                        <div class="type-item">
                            <svg-icon name="other-weibo" />
                            <p>微博</p>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <copyright class="copyright" />
    <div class="footer-img">
        <img src="@/assets/login/footer_img.png" alt="" srcset="">
    </div>
</div>
</template>

<script>
import {
    reactive,
    ref
} from 'vue'
import {
    useStore
} from 'vuex'
import {
    useRouter
} from 'vue-router'
import setting from '@/setting'
import copyright from '@/layouts/base-layout/copyright/index.vue'
import layoutStyle from '@/styles/layout/base-layout/layout.module.scss'
export default {
    name: 'login',
    components: {
        copyright
    },
    setup() {
        const refForm = ref(null)
        const ruleForm = reactive({
            username: 'admin',
            password: '123456'
        })
        const rules = reactive({
            username: [{
                required: true,
                message: '请输入账号',
                trigger: 'blur'
            }],
            password: [{
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }]
        })
        // 状态
        const store = useStore()
        const router = useRouter()
        // 登录
        function submitForm() {
            refForm.value.validate(async (valid) => {
                if (valid) {
                    await store.dispatch('user/login', ruleForm)
                    router.push({
                        path: `/${setting.indexPage}`
                    })
                }
            })
        }

        function resetFields() {
            ruleForm.username = ''
            ruleForm.password = ''
        }
        const checked = ref(true)
        return {
            ruleForm,
            rules,
            refForm,
            setting,
            submitForm,
            resetFields,
            checked,
            layoutStyle
        }
    }
}
</script>

<style lang="scss" scoped>
.login-page {
    position: relative;
    flex-direction: row;
    width: 100vw;
    min-height: 100vh;
    color: #fff;

    // border:1px solid red;
    background: url("@/assets/login/login_bg.jpg") no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    overflow: hidden;

    .login-center {
        // border: 1px solid red;
        height: auto;
        width: 500px;
        padding: 60px 20px 20px 20px;
        background: #fff;
        border-radius: 10px;
        transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        box-shadow: rgb(145 158 171 / 24%) 0 0 2px 0, rgb(145 158 171 / 24%) 0 16px 52px -4px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);

        .login-title {
            font-size: 23px;
            color: #333;
            font-weight: 400;
            text-align: center;
        }

        .login-form {
            margin-top: 8vh;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            align-items: center;

            span {
                color: #504f4f;
                font-size: 14px;
            }

            span:hover {
                color: #409EFF;
            }
        }

        .login-type {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .type-item {
                width: 33%;
                text-align: center;

                .svg-icon {
                    font-size: 28px;
                }

                p {
                    font-size: 14px;
                    color: #504f4f;
                }
            }
        }
    }

    .copyright {
        position: absolute;
        bottom: 20px;
        left: 0;
        z-index: 999;
    }

    .footer-img {
        width: 260px;
        height: 90px;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    // 小于768
    @media (max-width: 768px) {
        .login-center {
            height: auto;
            width: 350px;
            margin: auto;
        }

    }

    // 大于992
    @media (min-width: 992px) {
        // border: 1px solid red;
        .login-center {
            height: auto;
            width: 500px;
            margin: auto;
        }

    }
}
</style>
